import React from 'react';

import styled from 'styled-components';

import Avatar from 'material-ui/Avatar';
import TextField from 'material-ui/TextField';
import FontIcon from 'material-ui/FontIcon';
import RaisedButton from 'material-ui/RaisedButton';
import IconButton from 'material-ui/IconButton';
import Paper from 'material-ui/Paper';

const Layout = styled.div`
	backgroundColor: #ccc;
	position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  display: ${(props) => props.show || 'none'};
`;

const MyPaper = styled(Paper)`
	margin: 150px auto 100px auto;
	padding: 45px 20px;
	z-index: 1;
`;

const Header = styled.header`
	backgroundColor: #aaa;
	position: absolute;
  top: 0;
  left: 0;
	height: 300px;
	width: 100%;
	display: block;
`;

const AvatarArea = styled.div`
	width: 100%;
	text-align: center;
`;

export const LoginYz = ({ show }) => (
  <Layout show={ show }>
  	<Header>
  		<div>
  			<IconButton iconClassName="muidocs-icon-custom-github" />
  		</div>
  		<AvatarArea>
  			<Avatar icon={<FontIcon className="muidocs-icon-communication-voicemail" />} size="60" />
  		</AvatarArea>
  	</Header>
  	<MyPaper zDepth={3} >
  		<div>
				<TextField
			    hintText="UserName"
			    floatingLabelText="UserName"
			  />
  		</div>
  		<div>
  			<TextField
	  	    hintText="Password"
	  	    floatingLabelText="Password"
	  	  />
  		</div>
  		<div>
  			<RaisedButton label="Login" primary={true} fullWidth={true} />
  		</div>
  	</MyPaper>
  </Layout>
);

LoginYz.propTypes = {
	show: React.PropTypes.string.isRequired
}

export default LoginYz;